<template>
  <div class="layout">
   <div class="layout-left" v-if="articleList.length != 0">
     <articleList :typeId="typeId"></articleList>
   </div>
    <div v-else>
          <p
            style="
              text-align: center;
              color: #717171;
              margin-top: 5%;
              font-family: STXingkai;
              font-size: 25px;
            "
          >
            暂无评论，快来发表评论吧！
          </p>
        </div>
    <div class="layout-right" style="margin-top:8px;">
      <div class="hot-reccomd">
        <div class="layout-rtop"><i class="iconfont">&#xe8ab;</i>热门文章</div>
        <div class="layout-rboot">
          <ul>
            <li
              v-for="(item, index) in typeArticleHotList"
              :key="item.articleId"
            >
              <router-link
                :to="{
                  path: '/articleDetail',
                  query: { articleId: item.articleId },
                }"
              >
                <div class="rboot">
                  <p>{{ index + 1 }}</p>
                </div>
                <div class="rboot-right">
                  <p>{{ item.articleTitle }}</p>
                  <!-- 这里的意思是 如果你formatDate存在 并且前有值就会默认调用后面那个过滤器 -->
                  <span style="margin: left">{{
                    item.updateTime | formatDate
                  }}</span>
                  <span style="float: right">{{ item.typeName }}</span>
                </div>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/typeList.css";
import articleList from "@/components/articleList.vue"
import {  getTypeArticleHotList } from "@/api/typeList";
import { formatDate } from "@/utils/date";

export default {
  name: "typeList",
  data() {
    return {
      typeId: this.$route.query.typeId,
      typeArticleHotList: [],
    };
  },
  components:{
    articleList
  },
  created() {
    this.getTypeArticleHotListFun();
  },
  // 创建一个过滤器
  filters: {
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    },
  },
  methods: {
    getTypeArticleHotListFun() {
       const params = {
        typeId: this.typeId,
      };
      getTypeArticleHotList(params).then((response) => {
        this.typeArticleHotList = response.data;
      });
    },
  },
};
</script>

<style></style>
